<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.Date"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" scope="page" value="${request.contextPath}" />
<!DOCTYPE  >
<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>报修</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/weui/1.1.2/weui-for-work.min.css?version=0.1"/>
    <script type="text/javascript" src="${ctx}/static/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/weui/1.1.2/weui.min.js"></script>
    <!-- 企业微信的JS-SDK -->
    <script type="text/javascript" src="${ctx}/static/weui/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript" src="${ctx}/static/agent/floorInfo.js?v=<%=new Date().getTime() %>"/>
    <style>
        table {
            border-collapse: collapse;
            width:100%;
            border:1px solid #E1E6EB;
            border-left:none;
        }
        .weui-tab{
            position:relative;
            height:auto !important;
        }
        .weui-search-bar__box{position:relative;
            padding-left:30px;
            padding-right:30px;
            height:auto !important;
            width:100%;
            box-sizing:
                    border-box;z-index:1}
        select,option{
            width: 90%;
            height: 37px;
            text-align-last: center;
            border-radius: 5px;
            margin-left: 5%;
        }
    </style>
</head>
<body>
<div class="page">
    <div class="page__bd">
    <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form">
            <div class="weui-search-bar__box" >
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required/>
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText">
                <i class="weui-icon-search"></i>
                <span>搜索</span>
            </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>
    </div>
<form id = "repaireForm" action="${ctx}/weixin/repairInfo" method="post" enctype="multipart/form-data">
    <input type="hidden" name="userId" id="userId" value="${userId}" />
    <input type="hidden" name="machineType" id="machineType"  />
    <input type="hidden" name="repaireSubject" id="repaireSubject"  />
    <input type="file" hidden capture="camera" accept="image/*,video/*" id="file" name="file" value=""/>
    <div class="weui-cells__title">报修地址</div>
    <select name="address" onchange="selectfloor();">
        <option value="04">其他</option>
        <option value="01">兆丰</option>
        <option value="02">科汇</option>
        <option value="03">百丽</option>
        <option value="05">杨浦</option>
    </select>
    <select name="floor" style="display: none">

    </select>
    <div class="weui-cells weui-cells_radio" hidden>
        <label class="weui-cell weui-check__label" for="address_01">
            <div class="weui-cell__bd">
                <p>兆丰</p>
            </div>
            <div class="weui-cell__ft">
                <%--<input type="radio" class="weui-check" name="address" value="01" id="address_01"/>--%>
                <span class="weui-icon-checked"></span>
            </div>
        </label>
        <label class="weui-cell weui-check__label" for="address_02">

            <div class="weui-cell__bd">
                <p>科汇</p>
            </div>
            <div class="weui-cell__ft">
                <%--<input type="radio" name="address" class="weui-check" value="02" id="address_02" />--%>
                <span class="weui-icon-checked"></span>
            </div>
        </label>
        <label class="weui-cell weui-check__label" for="address_03">

            <div class="weui-cell__bd">
                <p>百丽</p>
            </div>
            <div class="weui-cell__ft">
                <%--<input type="radio" name="address" class="weui-check" value="03" id="address_03" />--%>
                <span class="weui-icon-checked"></span>
            </div>
        </label>
        <label class="weui-cell weui-check__label" for="address_05">
            <div class="weui-cell__bd">
                <p>杨浦</p>
            </div>
            <div class="weui-cell__ft">
                <%--<input type="radio" name="address" class="weui-check" value="其他" id="address_04" />--%>
                <span class="weui-icon-checked"></span>
            </div>
        </label>
        <label class="weui-cell weui-check__label" for="address_04">
            <div class="weui-cell__bd">
                <p>其他</p>
            </div>
            <div class="weui-cell__ft">
                <%--<input type="radio" name="address" class="weui-check" value="其他" id="address_04" />--%>
                <span class="weui-icon-checked"></span>
            </div>
        </label>
    </div>
    <div class="weui-cell" id="machineType_div">
        <table border= "1 " style="width: 100%">
            <tr>
                <c:forEach items="${picWords}" var="picWord"  begin="0" end="2" varStatus="st">
                    <c:if test="${picWord.pagePosition!=3}">
                        <td width= "33.333333% ">
                            <a href="javascript:;" onclick="changePicWords(${picWord.id},${picWord.pagePosition})" >
                                <div class="weui-grid__icon" style="margin-top: 20;">
                                    <img id="img${picWord.id}" src="${ctx}/weixin/picWord/download/${picWord.id}"  alt="">
                                </div>
                                <p class="weui-grid__label"><c:out value="${picWord.words}"/></p>
                            </a>　
                        </td>
                        </c:if>
                        <c:if test="${picWord.pagePosition==3}">
                            <td width= "33.333333% " rowspan="2">
                                <a href="javascript:;" onclick="changePicWords(${picWord.id},${picWord.pagePosition})">
                                    <div class="weui-grid__icon" style="margin-top: 20;">
                                        <img id="img${picWord.id}" src="${ctx}/weixin/picWord/download/${picWord.id}"  alt="">
                                    </div>
                                    <p class="weui-grid__label"><c:out value="${picWord.words}"/></p>
                                </a>　
                            </td>
                        </c:if>
                </c:forEach>
            </tr>
            <tr>
                <c:forEach items="${picWords}" var="picWord"  begin="3" end="4">
                    <td width= "33.333333% ">
                        <a href="javascript:;" onclick="changePicWords(${picWord.id},${picWord.pagePosition})">
                            <div class="weui-grid__icon" style="margin-top: 20;">
                                <img id="img${picWord.id}" src="${ctx}/weixin/picWord/download/${picWord.id}"  alt="">
                            </div>
                            <p class="weui-grid__label"><c:out value="${picWord.words}"/></p>
                        </a>　
                    </td>
                </c:forEach>
            </tr>

        </table>
    </div>
    <div class="weui-cells__title">判断常用</div>
    <div class=" weui-grids" id="normal"  style="margin-left: 20px;margin-right: 20px;">
    </div>




<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <textarea class="weui-textarea" name="description" placeholder="请具体描述下您的问题" rows="3"></textarea>
        </div>
    </div>
</div>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary"  href="#" onclick="javascript:submitRepaireInfo()" id="showTooltips">确定</a>
</div>
<div id="toast" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-icon-warn weui-icon_toast"></i>
        <p class="weui-toast__content"></p>
    </div>
</div>
</form>
<div class="page__bd" >
<div class="weui-tab">
    <div class="weui-tabbar">
        <a href="${ctx}/weixin/to_repair?code=&state=list" class="weui-tabbar__item weui-bar__item_on">
            <img src="${ctx}/static/images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">订单</p>
        </a>
        <a href="${ctx}/weixin/to_repair?code=&state=knowledge" class="weui-tabbar__item">
            <img src="${ctx}/static/images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">知识库</p>
        </a>
    </div>
</div>
</div>
</div>
<script type="text/javascript">
    $(function () {
//        $("select").searchableSelect();
        var $searchBar = $('#searchBar'),
            $searchText = $('#searchText'),
            $searchResult = $('#searchResult'),
            $searchInput = $('#searchInput'),
            $searchClear = $('#searchClear'),
            $searchCancel = $('#searchCancel');

        function hideSearchResult(){
            $searchResult.hide();
            $searchInput.val('');
        }
        $searchText.on('click', function(){
            $searchBar.addClass('weui-search-bar_focusing');
            $searchInput.focus();
        });
        function cancelSearch(){
            hideSearchResult();
            $searchBar.removeClass('weui-search-bar_focusing');
            $searchText.show();
        }
        $searchClear.on('click', function(){
            hideSearchResult();
            $searchInput.focus();
        });
        $searchCancel.on('click', function(){
            cancelSearch();
            $searchInput.blur();
        });
        $searchInput
            .on('blur', function () {
                if(!this.value.length) cancelSearch();
            })
            .on('input', function(){
                if(this.value.length) {
                    $.ajax({
                        url:'${ctx}/weixin/knowledge/list?condition='+this.value,
                        dataType:'json',
                        type: 'post',
                        xhrFields: {
                            withCredentials: true
                        },
                        success: function (result) {
                            $searchResult.empty();
                            var data = result.data;
                            if(!data) return;
                            var htmlStr = "";
                            data.forEach((knowledge,index) => {
                                htmlStr += "<div class=\"weui-cell weui-cell_access\"><div class=\"weui-cell__bd weui-cell_primary\"><a href=\"javascript:forward("+knowledge.id+")\"><p>";
                                htmlStr += knowledge.title;
                                htmlStr +="</p></a></div></div>";
                            });
                            $searchResult.append(htmlStr);
                        }
                    });
                    $searchResult.show();
                } else {
                    $searchResult.hide();
                }
            });
    });
    function forward(id) {
        location.href = "${ctx}/weixin/to_repair?code=&state=knowledge&condition="+$('#searchInput').val();
    }
    /*var floor_json={"01":["30","29" ,"28", "27", "26", "24", "22", "5", "4"]
    ,"02":["22", "21", "20", "19" ,"18", "17", "12", "11"]
    ,"03":["3"]
    ,"05":["3","2"]
    ,"04":["北京","成都","重庆","广州","杭州","南京","青岛","沈阳","深圳","天津","武汉","厦门","西安","郑州"]
    };*/
    selectfloor();
    //  选择楼层
    function selectfloor() {
        var _address = $("select[name=address]").val();
        var $floor = $("select[name=floor]");
        $floor.empty();
        var floors= floor_json[_address];
        var floor_html = "";
        $.each(floors,function (i,v) {
            floor_html +="<option value='"+v+"'>"+v+"</option>";
        });
        $floor.html(floor_html);
        $floor.attr("style","display:inline");
    }
    // /weixin/to_repair?code=&state=knowledge

    function changePicWords(picId,pagePosition) {
        $("#machineType").val(picId);
        $("#machineType_div").find("img").removeAttr("style");
        $("#img"+picId).attr("style","background:-webkit-linear-gradient(left, white, red)");
        $.ajax({
            url: "${ctx}/weixin/picWord/normalPicWords",
            data:{code:'1',parentPosition:pagePosition},
            dataType: "json",
            type:"post",
            success:function(result){
                if(result.code=='0'){
                    var normals= result.data;
                    var htmlStr = "";
                    $.each(normals,function (index,picWord) {
                        htmlStr += "<a href=\"javascript:;\" class=\"weui-grid\" onclick=\"javascript:addValue("+picWord.id+",'"+picWord.words+"')\"><div class=\"weui-grid__icon\">";
                        htmlStr += "<img id=\"img"+picWord.id+"\"  src=\"/weixin/picWord/download/"+picWord.id+"\" alt=\"\">";
                        htmlStr += " </div><p class=\"weui-grid__label\">"+picWord.words+"</p> </a>";
                    });
                    $("#normal").empty();
                    $("#normal").html(htmlStr);
                }else{
                    showErrorToast(result.msg);
                }
            }
        });
    }
    var txshow;
    function addValue(id,words) {
        $("#normal").find("img").removeAttr("style");
        $("#img"+id).attr("style","background:-webkit-linear-gradient(left, white, red)");
        $("#repaireSubject").val(id);
        if(id=='14'){
            showErrorToast("新员工如需开通网盘使用权限，请先联系秘书小姐姐哦。其他事宜，请继续提交服务申请");
        }
        if(words=='拍照'){
            chooseImage();
            txshow = document.getElementById("img"+id);
            document.getElementById("file").addEventListener('change', readFile, false);
        }
    }
    function readFile() {
        var file = this.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) { txshow.src = this.result; }
    }

    function  showErrorToast(errMsg) {
        var $toast = $('#toast');
        if ($toast.css('display') != 'none') return;
        $toast.find('p').html(null);
        $toast.find('p').html(errMsg);
        $toast.fadeIn(100);
        setTimeout(function () {
            $toast.fadeOut(100);
        }, 2000);
    }
    function changeSubject() {
        var _machineType = $("#machineType").val();
        $.each(repaireSubject,function (name,value) {
            if(_machineType == name){
                var htmlStr = "";
                $.each(value,function(index,text){
                    htmlStr += "<option value='"+text+"'>"+text+"</option>";
                });
                $("#repaireSubject").empty();
                $("#repaireSubject").html(htmlStr);
                return false;
            }
        })
    }
    var checkSubmitFlg = true;
    function submitRepaireInfo() {

        weui.form.validate('#repaireForm', function (error) {
            if (!error) {
                /*if($("input[name='address']:checked").val()==undefined){
                    showErrorToast("地址不能为空");
                    return;
                }*/
                if($(":input[name='machineType']").val()==''){
                    showErrorToast("选项不能为空");
                    return;
                }
                if (checkSubmitFlg == true) {
                    document.getElementById("repaireForm").submit();
                    checkSubmitFlg = false;

                }

              /*  var loading = weui.loading('提交中...');
                setTimeout(function () {
                    loading.hide();
                    weui.toast('提交成功', 3000);
                }, 1500);*/
            }
            // return true; // 当return true时，不会显示错误
        }, {
            regexp: {
                IDNUM: /(?:^\d{15}$)|(?:^\d{18}$)|^\d{17}[\dXx]$/,
                VCODE: /^.{4}$/
            }
        });
    }
    //初始化方法
    function init() {
        var userId="${ userId }";
        $("#userId").val(userId);
//        console.info("userId is "+userId )
//        getToken();
        //BINDCLICK();
    }
    function chooseImage() {
        $("#file").click();
        /*wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            defaultCameraMode: "batch", //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。（注：用户进入拍照界面仍然可自由切换两种模式）
            isSaveToAlbum: 1, //整型值，0表示拍照时不保存到系统相册，1表示自动保存，默认值是1
            success: function (res) {
//                alert(res);
                var localIds = res.localIds; // 返回选定照片的本地ID列表，
                // andriod中localId可以作为img标签的src属性显示图片；
                // iOS应当使用 getLocalImgData 获取图片base64数据，从而用于img标签的显示（在img标签内使用 wx.chooseImage 的 localid 显示可能会不成功）
            }
        });*/
    }
    function getLocalImgData() {
        wx.getLocalImgData({
            localId: '', // 图片的localID
            success: function (res) {
                var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
            }
        });
    }
    //从后台获取wx.config中所需要的参数
    function getToken() {
        $.ajax({
            url : "/weixin/zboxService/getSignature",
            type : "get",
            data : {"url1":location.href},
            dataType : "json",
            success : function(data) {
                console.log(data)
                var json = data;
                wx.config({
                    beta : true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                    debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId : json.appId, // 必填，企业微信的corpID
                    timestamp : json.timestamp, // 必填，生成签名的时间戳
                    nonceStr : json.nonceStr, // 必填，生成签名的随机串
                    signature : json.signature,// 必填，签名，见附录1
                    jsApiList : [ 'checkJsApi', 'chooseImage',
                        'openEnterpriseChat' ]
                    // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
                wx.ready(function() {
                    wx.checkJsApi({
                        jsApiList : [ 'chooseImage' ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                        success : function(ress) {
//                            alert(2)
                            // 以键值对的形式返回，可用的api值true，不可用为false
                            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                        }
                    });
                });
                wx.error(function(msg){
                    console.log(msg);
                })
            },
            error:function (data,a,b) {
                console.log(1);
            }
        });

    }

    //绑定两个按钮的点击事件
    function bindClick() {

        //这个接口是打开userIds对话框，运行则微信端直接跳到聊天框
        $("#a1").click(function() {
            wx.openEnterpriseChat({
                // 注意：userIds和externalUserIds至少选填一个，且userIds+openIds总数不能超过2000。
                userIds : 'DingSaiSai02;ZhuHao', //参与会话的企业成员列表，格式为userid1;userid2;...，用分号隔开。
                externalUserIds : '', // 参与会话的外部联系人列表，格式为userId1;userId2;…，用分号隔开。
                groupName : '讨论组', // 必填，会话名称。单聊时该参数传入空字符串""即可。
                success : function(res) {
                    // 回调
                },
                fail : function(res) {
                    if (res.errMsg.indexOf('function not exist') > -1) {
                        alert('版本过低请升级')
                    }
                }
            });
        });

        //这是选择本地图片的接口
        $("#a2").click(function() {
            wx.chooseImage({
                count : 1, // 默认9
                sizeType : [ 'original', 'compressed' ], // 可以指定是原图还是压缩图，默认二者都有
                sourceType : [ 'album', 'camera' ], // 可以指定来源是相册还是相机，默认二者都有
                defaultCameraMode : "batch", //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。（注：用户进入拍照界面仍然可自由切换两种模式）
                success : function(res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表，
                    // andriod中localId可以作为img标签的src属性显示图片；
                    // 而在IOS中需通过上面的接口getLocalImgData获取图片base64数据，从而用于img标签的显示
                }
            });
        });

    }
    //init();
</script>
</body>
</html>
